<template>
	<view :style="viewColor">
		<view class="flex">
			<view class="flex-month between">
				<text>月份：{{searchForm.month}}</text>
				<!-- :start="startDate" :end="endDate" -->
				<picker mode="date" :value="month" fields="month" @change="bindDateChange">
					<!-- 这个icon可以更换 -->
					<view style="padding-left: 20rpx">
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</picker>
			</view>
		</view>
		<view class="team-content">
			<view class="team-content-item" v-show="teamList.length > 0">
				<view class="item flex" v-for="(item,index) in teamList" :key="item.uid">
					<image class="item-image" :src="item.avatar ? item.avatar :'/static/images/f.png'" />
					<view class="item-right">
						<view class="item-right-top flex between">
							<span><text>昵称：</text> {{item.nickname}}</span>
							<span><text>手机号：</text> {{item.phone}}</span>
						</view>
						<view class="item-right-bottom flex between">
							<span><text>佣金：</text> {{item.brokerage_price}}</span>
							<span><text>业绩：</text> {{item.achievement}}</span>
						</view>
					</view>
				</view>
			</view>
			<view v-show="teamList.length === 0" style="text-align: center;">
				<image src="/static/images/no_thing.png"></image>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	import authorize from '@/components/Authorize';
	import { mapGetters	} from "vuex"
	import { organizerSpreadList } from '@/api/user.js';
	export default {
		data() {
			return {
				teamList: [],
				searchForm: {
					month: '',
					page: 1,
					limit: 10
				},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
			}
		},
		computed: mapGetters(['isLogin', 'viewColor', 'keyColor']),
		onLoad() {
			if(this.isLogin) {
				this.initMonth()
				this.getTeamList();	
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
			
		},
		methods: {
			// 取当月的值
			initMonth() {
				const date = new Date()
				const m = (date.getMonth() + 1).toString().padStart(2, 0)
				const y = date.getFullYear()
				// 默认值是当月
				this.searchForm.month = `${y}-${m}`
			},
			// 获取团上列表
			getTeamList() {
				organizerSpreadList(this.searchForm).then(res => {
					this.teamList = res.data || []
				})
			},
			// 月份选择
			bindDateChange(data) {
				this.month = data.detail.value
				this.getTeamList()
			},
			onLoadFun(){
				this.isShowAuth = false;
			    this.getTeamList();
			  },
			// 授权关闭
			authColse(){
				this.isShowAuth = e
			}
		}
	}
</script>

<style scoped lang="scss">
	// &-item{
	// 	margin-bottom: 20rpx;
	// 	background-color: #fff;
	// }
	.flex {
		display: flex;
		align-items: center;
		width: 100%;

		&-month {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 20rpx;
		}
	}

	.team-content {
		margin-top: 120rpx;
	}

	.between {
		justify-content: space-between;
	}

	.item {
		height: 150rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		background-color: #fff;

		&-image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;
		}

		&-right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			flex: 1;
			height: 130rpx;
			line-height: 40rpx;
			box-sizing: border-box;
			padding: 12rpx 0;

			i {
				color: #999;
				display: inline-block;
			}

			&-top {
				span {
					width: 50%;
				}
			}

			&-bottom {
				span {
					width: 50%;
				}
			}
		}
	}

	image {
		width: 414rpx;
		height: 240rpx;
	}
</style>